<template>
  <div class="game-container">
    <com_header />
    <div class="header">
      <div class="header-item">
        <div class="title">Explore the infinite gaming world!</div>
        <div class="text">
          <p>
            Bytetapper provides the latest game news, popular guides, exclusive
            reviews, as well as massive game downloads and community
            interactions.
          </p>
          <p>Whether you are a hardcore player or a casual enthusiast</p>
          <p>This is all your gaming paradise</p>
          <p>
            Join us and enjoy the world's popular games, discover more exciting
            things!
          </p>
        </div>
      </div>
    </div>
    <main>
      <game_menu />
      <game_free />
      <game_hot />
    </main>
    <com_footer />
  </div>
</template>

<script setup>
import com_header from "@/components/com_header/index.vue";
import com_footer from "@/components/com_footer/index.vue";
import game_menu from "@/views/Game/game_menu.vue";
import game_free from "@/views/Game/game_free.vue";
import game_hot from "@/views/Game/game_hot.vue";
</script>

<style lang="scss" scoped>
.game-container {
  padding-top: 80px;
  width: 100%;
  min-height: 100vh;
  background: #141922;
  .header {
    width: 100%;
    background: url("@/assets/game/bg.png") no-repeat;
    background-size: 100% 100%;
    .header-item {
      padding: 20px 280px;
      .title {
        color: #ffa300;
        font-size: 26px;
        margin-bottom: 20px;
      }
      .text {
        color: #fff;
        font-size: 18px;
        p {
          margin-bottom: 10px;
        }
      }
    }
  }
  main {
    margin: 0 auto;
    width: 1400px;
  }
}
</style>
